---
title: Create theme
description: HeroUI provides a simple way to create new themes.
---

# Create theme

Create a new theme by adding it to your `tailwind.config.js` file. For color palettes (50-900), you can use tools like [Eva Design System](https://colors.eva.design/) or [Smart Watch](https://smart-swatch.netlify.app/) to generate them.

<CarbonAd/>

### Add the new theme to the plugin

```js {9-43}
// tailwind.config.js
const {heroui} = require("@heroui/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    heroui({
      themes: {
        "purple-dark": {
          extend: "dark", // <- inherit default values from dark theme
          colors: {
            background: "#0D001A",
            foreground: "#ffffff",
            primary: {
              50: "#3B096C",
              100: "#520F83",
              200: "#7318A2",
              300: "#9823C2",
              400: "#c031e2",
              500: "#DD62ED",
              600: "#F182F6",
              700: "#FCADF9",
              800: "#FDD5F9",
              900: "#FEECFE",
              DEFAULT: "#DD62ED",
              foreground: "#ffffff",
            },
            focus: "#F182F6",
          },
          layout: {
            disabledOpacity: "0.3",
            radius: {
              small: "4px",
              medium: "6px",
              large: "8px",
            },
            borderWidth: {
              small: "1px",
              medium: "2px",
              large: "3px",
            },
          },
        },
      },
    }),
  ],
};
```

### Apply the new theme

Now, applying the new theme is as simple as adding the theme name `purple-dark` to the `className` of the
`html` / `body` or `main` element.

```jsx {4}
// main.tsx or main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import {HeroUIProvider} from "@heroui/react";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <HeroUIProvider>
      <main className="purple-dark text-foreground bg-background">
        <App />
      </main>
    </HeroUIProvider>
  </React.StrictMode>,
);
```

### Use the new theme

All components that use the `primary` color will be affected by this change.

```jsx
import {Button} from "@heroui/react";

export default function App() {
  return (
    <div className="flex flex-wrap gap-4 items-center">
      <Button color="primary" variant="solid">
        Solid
      </Button>
      <Button color="primary" variant="faded">
        Faded
      </Button>
      <Button color="primary" variant="bordered">
        Bordered
      </Button>
      <Button color="primary" variant="light">
        Light
      </Button>
      <Button color="primary" variant="flat">
        Flat
      </Button>
      <Button color="primary" variant="ghost">
        Ghost
      </Button>
      <Button color="primary" variant="shadow">
        Shadow
      </Button>
    </div>
  );
}
```

<Spacer y={4} />

import customTheme from "@/content/customization/create-theme/custom-theme";

<CodeDemo
  title="Custom theme example"
  showEditor={false}
  files={customTheme}
  className="bg-[#0D001A] text-[#FFFFFF]"
/>
